<template>
  <div id="meg">
    <div class="meg_nav" @click="drawer = true">
      <div class="meg_shoppingbag">
        <img src="../../img/meg_showcar.png" />
        <p>购物车</p>
        <div>
          <span>{{ userInfo.id ? cartgoods.length : 0 }}</span>
        </div>
      </div>
      <a class="meg_top" @click.stop="scrollToTop">
        <img src="../../img/meg_top.png" />
      </a>
    </div>
    <el-drawer title="购物车" :visible.sync="drawer" :direction="drection">
      <div class="meg_show">
        <div class="toolbar_header">
          <div class="pro_Chk">
            <input
              id="pro_ChkAll"
              type="checkbox"
              :checked="isSelectedAll"
              @click.stop="computeShopCar"
            />
            <label for="pro_ChkAll">全选</label>
          </div>
          <a @click.prevent="goToShop">全屏查看</a>
        </div>
        <div class="meg_content" v-if="userInfo.id">
          <DrawerItem
            v-for="goods in cartgoods"
            :key="goods.goods_id"
            :goods="goods"
            @computeShopCar="computeShopCar"
          />
        </div>
        <div class="meg_noLogin" v-else>请先登录~</div>
        <div class="toolbar_footer">
          <div class="pro_total">
            <h3>
              <span>已选</span>
              <strong class="total_count">{{ totalAmount }}</strong>
              <span>件</span>
            </h3>
            <span>
              <strong class="total_price">{{
                (totalPrice / 100) | moneyFormat
              }}</strong>
            </span>
          </div>
          <div class="pro_cashier">
            <el-button type="danger" :disabled="!totalAmount">结算</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import DrawerItem from "./children/DrawerItem.vue";
import { animate } from "@/config/utils";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      totalAmount: 0,
      totalPrice: 0,
      isSelectedAll: false,
    };
  },
  components: {
    DrawerItem,
  },
  computed: {
    ...mapState(["userInfo", "cartgoods"]),
  },
  mounted() {
    this.computeShopCar();
  },
  methods: {
    scrollToTop() {
      let docB = document.documentElement || document.body;
      animate(docB, { scrollTop: "0" }, 400, "ease-out");
    },
    goToshop() {
      this.$emit("goShopCar");
    },
    selectedAll(isSelectedAll) {
      this.isSelectedAll = !isSelectedAll;
      this.$store.dispatch(" selectedAll", { isSelectedAll });
      this.computeShopCar();
    },
    computeShopCar() {
      this.totalPrice = 0;
      this.totalAmount = 0;
      let flag = true;
      this.cartgoods.forEach((goods) => {
        if (goods.checked) {
          this.totalPrice += goods.buy_count * goods.price;
          this.totalAmount++;
        } else {
          flag = false;
        }
      });
      this.isSelectedAll = flag;
    },
  },
};
</script>

<style scoped>
#meg {
  position: fixed;
  right: 0px;
  top: 0;
  height: 100%;
  width: 35px;
  cursor: pointer;
}
#meg > .meg_nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000000;
}
.meg_nav > .meg_shoppingbag {
  margin-top: 100px;
  width: 100%;
  height: 135px;
}
.meg_shoppingbag > img {
  width: 35px;
  height: 35px;
}
.meg_shoppingbag > p {
  margin: 5px auto;
  width: 16px;
  height: 48px;
  line-height: 16px;
  text-align: center;
  color: white;
}
.meg_shoppingbag > div {
  margin: 10px auto;
  width: 18px;
  height: 18px;
}
.meg_shoppingbag > div > span {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  background: #ff0018;
  color: white;
  text-align: center;
  font-size: 14px;
}
.meg_nav > .meg_top {
  display: block;
  position: absolute;
  bottom: 50px;
  width: 100%;
  height: 30px;
  cursor: pointer;
}
.meg_show > .toolbar_header {
  margin-bottom: 10px;
  width: 100%;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.meg_show .toolbar_header .pro_Chk {
  padding-left: 10px;
  width: 60px;

  display: flex;
  align-items: center;
}
.pro_Chk #pro_ChkAll {
  width: 12px;
  height: 12px;
}
.pro_Chk label {
  margin-left: 5px;
  margin-bottom: 0;
  font-size: 12px;
  color: gray;
  cursor: pointer;
}
.meg_show .toolbar_header a {
  width: 60px;
  font-size: 12px;
  color: gray;
  cursor: pointer;
}
.toolbar_footer {
  position: absolute;
  bottom: 0;
  padding: 0 16px;
  width: 100%;
  background: #eaeaea;
  z-index: 99999;
}
.toolbar_footer > .pro_total {
  width: 100%;
  height: 30px;
  background: #eceaea;
  color: #333;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pro_total > h3 {
  margin-bottom: 0;
  color: #000;
  font-weight: 400;
  font-size: 12px;
}
.pro_total > span > .total_price {
  font-weight: 600;
  color: #ff0036;
  font-size: 12px;
}
.pro_cashier {
  padding: 0 0 10px;
  width: 100%;
  text-align: center;
}
.pro_cashier button {
  width: 160px;
}
.meg_content {
  padding-bottom: 80px;
  width: 100%;
  overflow: auto;
}
.meg_noLogin {
  height: 100%;
  text-align: center;
  vertical-align: middle;
  color: #666;
}
</style>